<template>
  <div>
    <el-upload v-model:file-list="fileList" class="upload-demo" :list-type="fileType" :limit="limit" multiple
      action="http://localhost:5173/" show-file-list :auto-upload="false" :on-change="handleChange"
      :on-exceed="handleExceed">
      <el-button type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip" v-if="isExist">
          只能上传<em><strong>{{ limit }}</strong></em>个文件，且文件类型为<em><strong>{{ fileType }}</strong></em>
        </div>
      </template>
      <el-button class="ml-3" type="success" @click="submitUpload">
        upload to server
      </el-button>
    </el-upload>
  </div>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'
const props = defineProps({
  'list-type': {
    type: Array,
    default: []
  },
  limit: {
    type: Number,
    default: 0
  }
})
const limit = computed(() => {
  return props.limit
})
const fileType = computed(() => props.listType?.join(',') || '')
const isExist = computed(() => {
  return props.limit
})
const handleExceed = (files, uploadFiles) => {

  if (files.length > props.limit) {
    ElMessage.error('上传失败')
  } else {
    ElMessage.success('11')
  }
}

</script>

<style lang="scss" scoped></style>